<template>
  <div>
    <div class="water_one"></div>
  </div>
</template>

<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
export default {
  mounted() {
    this.$nextTick(() => {
      this.waterBollOne();
    });
  },
  methods: {
    waterBollOne() {
      var chartDom = document.querySelector(".water_one");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            type: "liquidFill",
            data: [0.5, 0.45, 0.4],
            radius: "99%",
            shape: "circle", //圆
            center: ["50%", "50%"],
            backgroundStyle: {
              // 背景色
              color: "#E0F4FC",
            },
            //   中间值样式
            label: {
              show: true,
              color: "#fff",
              insideColor: "#fff",
              fontSize: 50,
              fontWeight: "bold",
              align: "center",
              baseline: "middle",
              position: "inside",
            },
            color: ["#41D24A"],
            outline: {
              show: true,
              borderDistance: 0,
              itemStyle: {
                color: "none",
                borderColor: "#41D24A",
                borderWidth: 2,
                shadowBlur: 1,
                shadowColor: "#41D24A",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>

.water_one {
  width: 100%;
  height: 300px;
  display: inline-block;
}
</style>